<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import useSubCategoryStore from "@/pinia/modules/subCategoryStore/subCategoryStore.ts";
import type { RouteLocationNormalized } from "vue-router";
import type { PageParams, Attr } from "@/types/subCategoryTypes/subCategoryTypes.ts";
import SubBread from "@/views/subCategory/components/subBread/subBread.vue";
import Fliter from "@/views/subCategory/components/fliter/fliter.vue";
import Sort from "@/views/subCategory/components/Sort/Sort.vue";
import Good from "@/components/lib/Good.vue";

const route: RouteLocationNormalized = useRoute();
const subCategoryStore = useSubCategoryStore();

const { goodsList, counts } = storeToRefs(subCategoryStore);


/*分页查询参数*/
const pageParams = reactive<PageParams>({
   page: 1,
   pagesize: 10,
});

/*获取商品列表的回调函数*/
const fetchGoodsList = () => {
   try {
      subCategoryStore.fetchGoodsList(pageParams);
   } catch (error: any) {
      ElMessage.error(error);
   }
};

/*排序组件的自定义事件*/
const changeSort = (sortParams: PageParams) => {
   Object.assign(pageParams, sortParams);
   fetchGoodsList();
};

/*filter组件的自定义事件*/
const getBrandId = (brandId: string | null) => {
   pageParams.brandId = brandId;
   pageParams.page=1
   fetchGoodsList();
};

/*filter组件的自定义事件*/
const getAttrs = (attrs: Attr[]) => {
   pageParams.attrs = attrs;
   pageParams.page=1
   fetchGoodsList();
};

onMounted(() => {
   pageParams.categoryId = route.params.id as string;
   fetchGoodsList();
});

onBeforeRouteUpdate((to, from, next) => {
   next();
   pageParams.categoryId = to.params.id as string;
   fetchGoodsList();
});


</script>

<template>
   <div class="sub-category container">
      <!--面包屑-->
      <sub-bread></sub-bread>
      <!--筛选组件-->
      <fliter @getBrandId="getBrandId" @getAttrs="getAttrs"></fliter>
      <div class="goods-list">
         <!--排序组件-->
         <Sort @changeSort="changeSort"></Sort>
         <!--商品列表-->
         <ul>
            <li v-for="(good) in goodsList" :key="good.id">
               <Good :good="good"></Good>
            </li>
         </ul>
         <!--分页器-->
         <el-pagination
            v-model:current-page="pageParams.page" v-model:page-size="pageParams.pagesize"
            :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
            :total="Number(counts||0)" @size-change="fetchGoodsList()"
            @current-change="fetchGoodsList()" background>
         </el-pagination>
      </div>
   </div>
</template>

<style scoped lang="less">
.goods-list {
   background: #fff;
   padding: 0 25px;
   margin-top: 25px;
   padding-bottom: 15px;

   ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0 5px;


      li {
         margin-right: 20px;
         margin-bottom: 20px;

         &:nth-child(5n) {
            margin-right: 0;
         }
      }
   }

   .el-pagination {
      display: flex;
      justify-content: center;
   }
}
</style>
